<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.css">
    <title>bs</title>
    <style>
        .test-box {
            z-index: 2000;
        }

        .test-box button{
            /*flex: 0 0 33.3333%;*/
            flex-grow: 1;
            flex-shrink: 0;
        }

    </style>
<body class="bg-light">


<div class="position-fixed top-50 start-50 translate-middle test-box">
    <div class="d-flex align-items-center justify-content-center flex-wrap">
        <button class="btn btn-success" id="btn">点我</button>

    </div>

</div>


<script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
<script src="dist/js/bootstrap-notify.min.js"></script>


<script>

    document.querySelector('#btn').addEventListener('click', function () {
        BootstrapNotify.show({
            header:'李白《渡荆门送别》',
            body:'月下飞天镜，云生结海楼。',
            dismissBtnShow:false
        });
    });


</script>

</body>
</html>
